import React from "react";
import {List, Input, Button} from "antd";

/**
 * UI组件负责页面的渲染
 * 当组件只有一个render函数的时候，就可以用一个无状态组件替换掉这个组件
 * 其实无状态组件就是一个函数
 * 无状态组件相对于普通的组件它的优势就是无状态组件它的性能比较高
 * 1. 因为无状态组件就是一个函数，而普通的组件它是一个js里面的类，这个类生成的对象里面还会又一些生命周期函数
 * 所以它执行起来既要执行生命周期函数又要执行render ，所以它执行的东西远比这个函数执行的东西要多得多
 * 所以一个普通组件的性能是肯定赶不上一个无状态组件的
 * 2.只要看到一个组件只有render函数，就直接使用无状态组件，这样性能是最优的
 */
const TodoListUI = (props) => {
    return (
        <div style={{marginTop: '10px', marginLeft: '10px'}}>
            <Input.Group compact>
                <Input
                    style={{width: '300px'}}
                    placeholder={'todo info'}
                    value={props.inputValue}
                    onChange={props.handleInputChange}
                />
                <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
            </Input.Group>
            <List
                style={{marginTop: '10px', width: '300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={() => {
                        props.handleDeleteItemClick(index)
                    }
                    }>
                        {item}
                    </List.Item>
                )}
            />
        </div>
    )
}

export default TodoListUI